	 	
 var userCompIds = new Array("firstName","middleInitial","lastName","title","email","phone1","phone2","phone3","phone4");
 var userValidationCompIds = new Array("firstName","title","email","phone1");
 var loginValidationCompIds = new Array("userName","password","confirmPassword","permission");

 function userInfoDeatilsPanel(){

	 	var groupStore=CRM.commons.createComboStore('groupStoreid','userManager/groupList','');
	
	   	var userInfoPanel = new Ext.FormPanel({
	            //xtype       : 'fieldset',
	            id          : 'userInfoPanel',
	            title       : 'User Information',
	            height      : 275,
	            width       : 550,
	            labelWidth  : 120,
	            padding		: '5px',
	            border		: true,
	            layout      : 'form',
	            items       : [
	                            {
	                            	xtype     : 'hidden',
	                            	fieldLabel: 'Employee',
	                            	id        : 'employeeId',
	                            	value	  : '0'
	                            },
	                            {
	                              xtype     : 'compositefield',
	                              fieldLabel: 'Name<font color=red>*</font>',
	                              items     : [
												{
												    xtype   : 'hidden',
												    id      : 'userId',
												    value	: '0'
												 },
	                                            {
	                                                xtype   : 'textfield',
	                                                id      : 'firstName',
	                                                width   :  180,
	                                                allowBlank : false
	                                             },
	                                             {
	                                                xtype   : 'textfield',
	                                                id      : 'middleInitial',
	                                                width   :  30
	                                             },
	                                             {
	                                                xtype   : 'textfield',
	                                                id      : 'lastName',
	                                                width   :  180
	                                             }
	                                           ]
	                            },
	                            {
	                                xtype       : 'textfield',
	                                id          : 'title',
	                                fieldLabel  : 'Title<font color=red>*</font>',
	                                width       : 220,
	                                allowBlank : false
	                            },
	                            {
	                                xtype       : 'textfield',
	                                id          : 'email',
	                                fieldLabel  : 'Email<font color=red>*</font>',
	                                //vtype       :'email',
	                                width       : 400
	                            },
	                            {
	                                xtype       : 'textfield',
	                                id          : 'phone1',
	                                fieldLabel  : 'Phone (Work)<font color=red>*</font>',
	                                width       : 220
	                                //vtype       :'phone'
	                            },
	                            {
	                                xtype       : 'textfield',
	                                id          : 'phone2',
	                                fieldLabel  : 'Phone (Mobile)',
	                                width       : 220
	                                //allowBlank  : false
	                                //vtype       :'phone'
	                            },
	                            {
	                                xtype       : 'textfield',
	                                id          : 'phone3',
	                                fieldLabel  : 'Phone (Home)',
	                                width       : 220
	                                //vtype       :'phone'
	                            },
	                            {
	                                xtype       : 'textfield',
	                                id          : 'phone4',
	                                fieldLabel  : 'Fax',
	                                width       : 220
	                                //vtype       :'phone'
	                            },
	                            {
	                            	xtype      : 'checkbox',
	                            	fieldLabel : 'External',
	                            	id         : 'employeeType'
	                            }
	                          ],
	               bbar    	: 
	               			{   
	            	   			xtype        : 'toolbar',
	            	   			buttonAlign  : 'right',
	            	   			id			 : 'userBottomToolBar',
	            	   			items        : [
												'-',
												{
												 xtype   : 'button',
												 id	  	 : 'newButton',
												 text    : 'New',
												 handler : function(){
													 		  newUserDetailsForm();
												 			}
												},
	            	   			                '-',
		                                         {
		                                          xtype   : 'button',
		                                          id	  : 'editButton',
		                                          text    : 'Edit',
		                                          handler : function(){editUserDetailsForm();}
		                                         },
												'-',
		                                         {
		                                          xtype   : 'button',
		                                          id	  : 'saveButton',
		                                          text    : 'Save',
		                                          handler : function(){
		                                        	  			validateAndSaveUser(this.getText(), userInfoPanel);
		                                        	  		 }
		                                         },
		                                         '-'
		                                        ]
	               			}	   	
	        });

        var loginPanel = new Ext.FormPanel({
        		xtype       : 'panel',
	            id          : 'loginPanel',
	            title       : 'Login Information',
	            height      : 165,
	            width       : 550,
	            labelWidth  : 120,
	            layout      : 'form',
	            frame       : true,
                items       : [{
			                    	xtype       : 'textfield',
			                        id          : 'userName',
			                        fieldLabel  : 'User Name<font color=red>*</font>',
			                        width       : 370
			                   },
			                   {
			                	    xtype       : 'textfield',
			                	    inputType	: 'password',
	                                id          : 'password',
	                                fieldLabel  : 'Password<font color=red>*</font>',
	                                width       : 200
			                    },
		                        {
			                    	xtype       : 'textfield',
			                    	inputType	: 'password',
	                                id          : 'confirmPassword',
	                                fieldLabel  : 'Confirm Password<font color=red>*</font>',
	                                width       : 200
			                    },
			                    
			                     {
	                                xtype       : 'compositefield',
	                                labelWidth  : 220,
	                                fieldLabel  : 'Permission/Authority<font color=red>*</font>',
			                        items       : [
													{
													    xtype       : 'combo',
													    id          : 'permission',
													    store		: groupStore,
													    valueField  : 'id',
													    displayField: 'criteria',
													    triggerAction: 'all',
													    value		: 'SELECT',
													    editable	: false,
													    listeners	: {select : function(){
									                    						bindValue('permission', 'permissionId');
									                    					} 
													    			  }
													},
													{
													    xtype       : 'hidden',
													    id          : 'permissionId',
													    width		: 50
													},
			                                       	{	xtype		: 'displayfield', value:'Activate:', width : 50},
													{
													    xtype       : 'checkbox',
													    id          : 'activate',
													    checked		: true	
													}
			                                       	 /*,
													 {	xtype		: 'displayfield', value:'Send Email:', width : 70},
								                     {
								                        xtype      	: 'checkbox',
								                        id         	: 'sendEmail',
								                        checked		: true
								                     }*/
								                   ]
								 }
                              ],
                   bbar    	: 
  	               			{   
  	            	   			xtype        : 'toolbar',
  	            	   			buttonAlign  : 'right',
  	            	   			id			 : 'loginBottomToolBar',
  	            	   			items        : [
  	            	   			                '-',
  		                                         {
  		                                          xtype   : 'button',
  		                                          id	  : 'createLoginButton',
  		                                          text    : 'Create',
  		                                          handler : function(){
  		                                        	  			validateAndCreateLogin(this.getText(), loginPanel);
  		                                          			}		
  		                                         },
  												 '-'
  		                                         ,
 		                                         {
 	  		                                      xtype   : 'button',
 	  		                                      id	  : 'editLoginButton',
 	  		                                      text    : 'Edit',
 	  		                                      handler : function(){
 	  		                                    	  			enableLoginForm(true);
 	  		                                       			}		
 	  		                                      },
 	  		                                      '-'
  		                                        ]
  	               			}	                                 
            });	            
	        
	        var userCompanyPanel = new Ext.Panel({
                    xtype       : 'panel',
                    id          : 'userCompanyPanel',
                    name		: 'userCompanyPanel',
                    width       : 580,
                    autoHeight  : true,
                    //layout      : 'vbox',
                    padding     : '5px',
                    items       : [userInfoPanel, loginPanel],
                    frame       : true
                });
	        

	
	        var basicPanel = new Ext.Panel({
                    xtype       : 'panel',
                    id          : 'basicPanel',
                    name		: 'basicPanel',
                    width       : 600,
                    height      : 500,
                    layout      : 'vbox',
                    padding     : '5px',
                    frame       : true,
                    items       : [userCompanyPanel]
            });
	        
	        
	        validateFormOnLoad(userInfoPanel, userValidationCompIds);
		    enableLoginForm(false);
		    return basicPanel;
 	};
 	
 	 function newUserDetailsForm(){
	 		 Ext.getCmp('userInfoPanel').getForm().reset();
	 		 Ext.getCmp('loginPanel').getForm().reset();
	 		 enableLoginForm(false);
	 		 editUserDetailsForm();
	 		 Ext.getCmp('userBottomToolBar').findById('saveButton').setText('Save');
 	 }
 
 	 
	 function disableUserDetailsForm(){
		 	var form = Ext.getCmp('userInfoPanel');
		 	doFormReadOnly(form, userCompIds, true); //this method is in FormUtil.js
		 	Ext.getCmp('userBottomToolBar').findById('saveButton').disable();
		 	Ext.getCmp('userBottomToolBar').findById('editButton').enable();
	};
	
	function editUserDetailsForm(){
	 		var form = Ext.getCmp('userInfoPanel');
	 		doFormReadOnly(form, userCompIds, false); //this method is in FormUtil.js		
	 		Ext.getCmp('userBottomToolBar').findById('saveButton').enable();
	 		Ext.getCmp('userBottomToolBar').findById('saveButton').setText('Update');	
	};

	function enableLoginForm(enable){
			var loginCompIds = new Array("userName","password","confirmPassword","createLoginButton","permission","activate");
			var form = Ext.getCmp('loginPanel');
			if(enable == false){
				doFormReadOnly(form, loginCompIds, true);
			}else{
				doFormReadOnly(form, loginCompIds, false);
			}
			var userId = form.getForm().findField('userName').getValue();
			if(userId == 'undefined' || userId == '' || userId == '0'){
				Ext.getCmp('loginBottomToolBar').findById('createLoginButton').setText('Create');
			}else{
				Ext.getCmp('loginBottomToolBar').findById('createLoginButton').setText('Update');
			}
	};	
 
	
	function validateAndSaveUser(action, form){
		 var validationSuccess = simpleFormValidation(form, userValidationCompIds);
		 	if(validationSuccess == 'true'){
				addUserInfo(action, form);
			}
  	 };
 
	function addUserInfo(action, form) {
		   //var action = Ext.getCmp('userBottomToolBar').findById('saveButton').getText();
		   //var formPanel = Ext.getCmp('userInfoPanel');
		
		   var message = 'No action taken.';
		     if(action == 'Save'){
		  	   message = 'Saved Successfully!';
		     }
		     if(action == 'Update'){
		  	   message = 'Updated Successfully!';
		     }

	       var values = form.getForm().getValues();
	       var encoded = Ext.encode(values);
	       Ext.Ajax.request({
	       	   url      : 'userManager/save?action='+action,
	       	   method   : 'POST', 
			   success	: function(result, request){
	    			  			var jsonData = Ext.util.JSON.decode(result.responseText); 
	     			  			var responsedEmpId = jsonData.data;
	     			  			form.getForm().findField('employeeId').setValue(responsedEmpId);
	     				    	Ext.Msg.alert('Message',message);
								disableUserDetailsForm();   
								enableLoginForm(true);
								/*
								var email = Ext.getCmp('email').getValue();
								Ext.getCmp('loginPanel').getForm().findField('userName').setValue(email);
								*/
	     			   		  },
	       	   failure  : function(){
	       		   				Ext.Msg.alert('Alert','Failure!');
	       		   			  },
	       	   jsonData : encoded  
	       	});
	};
	
	
	function validateAndCreateLogin(action, form){
		var validationSuccess = simpleFormValidation(form, loginValidationCompIds);
	 	if(validationSuccess == 'true'){
			createLogin(action, form);
		}
	}
	
	function createLogin(action, form){
		var userForm 		 = Ext.getCmp('userInfoPanel').getForm();
		var empId 			 = userForm.findField('employeeId').getValue();
		var email 			 = userForm.findField('email').getValue();
		//var action 			 = Ext.getCmp('loginBottomToolBar').findById('createLoginButton').getText(); 
		var message 		 = 'No action taken.';
		
	     if(action == 'create'){
	  	   message = 'Created Successfully!';
	     }
	     if(action == 'Update'){
	  	   message = 'Updated Successfully!';
	     }
	     
		var userCompanyPanel = Ext.getCmp('userCompanyPanel'); 
		userCompanyPanel.el.mask('Processing...', 'x-mask-loading');
		
		var loginForm = form.getForm();
		var password = loginForm.findField('password').getValue();
		var confirmPassword = loginForm.findField('confirmPassword').getValue();
		//alert(password+", "+confirmPassword);
		if(confirmPassword == password){
		    var values = loginForm.getValues();
		    var encoded = Ext.encode(values);
			Ext.Ajax.request({
				method	: 'POST',
				url		: 'userManager/createLogin?empId='+empId+'&email='+email+'&action='+action,
				success : function(result, request){
							var jsonData = Ext.util.JSON.decode(result.responseText);
							var responsedUserName = jsonData.data;
							Ext.Msg.alert('Message', message+' '+responsedUserName);
							userCompanyPanel.el.unmask();
							enableLoginForm(false);
						  },
				failure	: function(result, request){
							Ext.Msg.alert('Error','Failure');
							userCompanyPanel.el.unmask();
						  },
				jsonData : encoded	  
			});
		}
		else{
			Ext.Msg.alert('Alert',"Confirm password must be same as given password!");
			userCompanyPanel.el.unmask();
		}
	};

	function showUserInfoDetails(){
		 var record = Ext.getCmp('spSearchUserGridPanel').getSelectionModel().getSelected();
		 var selectedEmpId = record.get('employeeId');
		 
		 var userForm = Ext.getCmp('userInfoPanel').getForm();
		 var loginForm = Ext.getCmp('loginPanel').getForm();
		 //formPanel.getForm().load({
		 Ext.Ajax.request({
			 method  : 'GET',
			 url     : 'userManager/showUserDetails?empId='+selectedEmpId,
			 success : function(result, request){
		  				var jsonData = Ext.util.JSON.decode(result.responseText); 
			  			var userData = jsonData.data;
				    	userForm.findField('employeeId').setValue(userData.employeeId);
				    	userForm.findField('firstName').setValue(userData.firstName);
				    	userForm.findField('middleInitial').setValue(userData.middleInitial);
				    	userForm.findField('lastName').setValue(userData.lastName);
				    	userForm.findField('title').setValue(userData.title);
				    	userForm.findField('email').setValue(userData.email);
				    	userForm.findField('phone1').setValue(userData.phone1);
				    	userForm.findField('phone2').setValue(userData.phone2);
				    	userForm.findField('phone3').setValue(userData.phone3);
				    	userForm.findField('phone4').setValue(userData.phone4);
				    	userForm.findField('employeeType').setValue(userData.employeeType);
				    	loginForm.findField('userName').setValue(userData.userName);
				    	loginForm.findField('password').setValue(userData.password);
				    	loginForm.findField('confirmPassword').setValue(userData.confirmPassword);
				    	loginForm.findField('permission').setValue(userData.permission);
				    	loginForm.findField('permissionId').setValue(userData.permissionId);
						disableUserDetailsForm();   
						enableLoginForm(false);
			   		  },
	         failure : function(){ 
	        		     alert ("Failure");
	       	          }
		});
		Ext.getCmp('mainTabPanel').setActiveTab(1);
	};
	
	
	function sendEmail(emailId, userName, password){
		//Ext.Msg.alert(emailId);
		Ext.Ajax.request({
			method	: 'POST',
			waitMsg : 'Sending...',
			url		: 'userManager/sendEmail?to='+emailId+'&userName='+userName+'&password='+password,
			success : function(result, request){
						var jsonData = Ext.util.JSON.decode(result.responseText);
						var responsedUserName = jsonData.data;
						Ext.Msg.alert('Message','Message Sent');
					  },
			failure	: function(result, request){
						Ext.Msg.alert('Error','Failure');	
					  }		  
		});
	};
